<template>
	<view :style="{ '--color': color }">
		<status-bar title="提现"></status-bar>

		<view class="navBox">
			<u-tabs
				:list="payInfo"
				keyName="to_name"
				@click="click"
				:current="current"
				lineWidth="28"
				:lineColor="color"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
			></u-tabs>
		</view>

		<block v-for="(item, index) in payInfo" :key="index">
			<view
				class="wechat"
				:class="(item.cash_method == 6 && cxtStatus == 1) || (item.cash_method != 6 && item.bankName) ? 'backgg' : 'flexac'"
				@click="addAcount(item)"
				v-if="current == index"
			>
				<view class="d-flex a-center" v-if="(item.cash_method == 6 && cxtStatus == 1) || (item.cash_method != 6 && item.bankName)">
					<image :src="$imgUrls(item.account_img)" mode="aspectFit" class="CodineIMG" v-if="item.account_img"></image>
					<view class="d-flex f-column m-left20">
						<text class="white size32 bold">{{ item.bankName }}</text>
						<text class="white size26 m-top20">{{ item.userName }}（{{ item.phone || item.bankCard }}）</text>
					</view>
				</view>
				<view class="d-flex a-center color bold" v-else>
					<view class="iconfont icon-tianjia h6"></view>
					<text class="size28 m-left10" v-if="item.cash_method == 6">{{ cxtStatus == 101 ? '点击去认证' : '点击去绑卡' }}</text>
					<text class="size28 m-left10" v-else>{{ item.cash_method | methodTxt }}</text>
				</view>
			</view>
		</block>

		<view class="duihne">
			<view class="row j-sb a-center">
				<text class="color_38 size28 bold">提现金额</text>
				<view class="withBtn" @click="toUrl('/moneyPage/capital/detail')">提现记录</view>
			</view>

			<view class="row a-center m-top20 bot">
				<image :src="$pop.staticImg('jifen.png')" class="jifenIcon"></image>
				<input type="number" v-model="money" @input="inputMoney" class="Jifen" placeholder="请填写提现金额" />
				<text class="color bold size26" @click="Exchange" v-if="pageData.income > 0">全部提现</text>
			</view>
			<text class="color_66 size26 m-top14" v-if="!money">当前账号可提现金额：{{ pageData.income }}</text>
			<text class="color_66 size26 m-top14" v-else>{{ FeesTxt }}</text>
			<view class="row j-sa a-center m-top50">
				<view class="btns flexac bgf4 size26 color_38" @click="$back()">考虑一下</view>
				<view class="btns flexac config size26 white" @click="SellBtn">立即提现</view>
			</view>
		</view>

		<view class="viewboxs auto m-top20">
			<u-parse :content="pageData.desc" :domain="imgUrl"></u-parse>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			imgUrl: this.imgUrl,
			pageData: '',
			payInfo: [],
			itemStyle: {
				height: '102rpx'
			},
			activeStyle: {
				color: '',
				fontSize: '30rpx',
				fontWeight: 'bold'
			},
			inactiveStyle: {
				color: '#333333',
				fontSize: '28rpx'
			},
			current: 0,
			money: '',
			cxtStatus: '', // 1正常提现、101未认证、24已认证未绑卡
			jumpUrl: '',
			FeesTxt: ''
		};
	},

	onShow() {
		this.activeStyle.color = this.color;
		this.cashRecordDetail();
	},
	methods: {
		// 诚薪通
		// 获取用户当前认证状态
		getStatus() {
			this.$http
				.get({
					url: '/cxtApi/getUserStatus'
				})
				.then((res) => {
					this.cxtStatus = res.code;
					if (res.code == 101) this.getHomeUrl();
					if (res.code == 24) this.getCashOutUrl();
				});
		},
		// 获取认证链接
		getHomeUrl() {
			this.$http
				.get({
					url: '/cxtApi/getHomeUrl'
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					this.jumpUrl = res.data;
				});
		},
		// 获取提现链接
		getCashOutUrl() {
			this.$http
				.get({
					url: '/cxtApi/getCashOutUrl'
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					this.jumpUrl = res.data;
				});
		},
		cashRecordDetail() {
			this.$http
				.get({
					url: '/zzj_singleSaleApi/cashRecordDetail'
				})
				.then((res) => {
					if (res.code != '200') return this.$Toast(res.msg);
					const result = res.data;
					this.pageData = result;
					this.payInfo = result.payInfo || [];
					if (this.payInfo.length) {
						// 诚薪通
						let cxt = this.payInfo.find((item) => item.cash_method == 6);
						if (cxt) this.getStatus();
					}
				});
		},
		click(e) {
			this.current = e.index;
		},
		Exchange() {
			this.money = this.pageData.income;
		},
		addAcount(item) {
			if (item.cash_method == 1) return this.toUrl(`addBank`);
			if (item.cash_method == 4 || item.cash_method == 5) {
				this.toUrl(`addKuan?cash_method=${item.cash_method}`);
			}
			if (item.cash_method == 6 && this.cxtStatus != 1) this.toUrl('/userPage/onlineService/webHttp?encodeURI=' + encodeURIComponent(this.jumpUrl));
		},
		SellBtn() {
			const result = this.payInfo[this.current];
			console.log(result, 'result');
			if (result.cash_method == 1 && !result.bankCard) return this.$Toast(`请添加银行卡`);
			if ((result.cash_method == 4 && !result.userName) || (result.cash_method == 5 && !result.userName)) return this.$Toast(`请添加收款信息`);
			if (result.cash_method == 6 && this.cxtStatus != 1) {
				if (this.cxtStatus == 101) this.$Toast('请先完成认证');
				if (this.cxtStatus == 24) this.$Toast('请先完成绑卡');
				return;
			}
			if (!this.money) return this.$Toast(`提现金额不能为空！`);
			this.$http
				.post({
					url: '/singleSaleApi/CommissionWithdrawal',
					data: {
						money: this.money,
						bankCard: result.bankCard,
						cash_method: result.cash_method
					}
				})
				.then((res) => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					this.$Toast(res.msg);
					this.money = '';
					this.cashRecordDetail();
				});
		},

		inputMoney(event) {
			const money = event.detail.value;
			const result = this.payInfo[this.current];

			this.$http
				.post({
					url: '/singleSaleApi/getTransactionFees',
					data: {
						money: this.money,
						cash_method: result.cash_method
					}
				})
				.then((res) => {
					if (res.errcode != 100) return this.Toast(res.msg);
					this.FeesTxt = res.text;
				});
		}
	},
	computed: {
		...mapState(['color'])
	},
	filters: {
		methodTxt(cash_method) {
			switch (cash_method) {
				case 1:
					return '点击添加银行卡';
				case 2:
					return '到微信红包';
				case 3:
					return '到余额';
				case 4:
					return '点击添加微信收款码';
				case 5:
					return '点击添加支付宝收款码';
				default:
					return '';
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.navBox {
	width: 690rpx;
	margin: 0 auto;
}

.duihne {
	width: 670rpx;
	background-color: #ffffff;
	margin: 30rpx auto 0;
	padding: 30rpx 30rpx 50rpx 30rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;

	.withBtn {
		color: #999;
		font-size: 26rpx;
		padding: 2rpx 20rpx;
	}
}

.Jifen {
	flex: 1;
	height: 80rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333333;
}

.jifenIcon {
	width: 27rpx;
	height: 29rpx;
}

.btns {
	width: 258rpx;
	height: 76rpx;
	border-radius: 38rpx;
}

.config {
	background-color: var(--color);
}

.wechat {
	width: 670rpx;
	min-height: 180rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	padding: 20rpx;
	border-radius: 20rpx;
}

.wechatImg {
	width: 100%;
	height: 300rpx;
}

.CodineIMG {
	width: 100rpx;
	height: 100rpx;
}

.backgg {
	display: flex;
	align-items: center;
	padding-left: 50rpx;
	background-color: var(--color);
}
</style>
